<template>
  <el-dialog :title="id ? '修改机柜' : '新增机柜'" :visible.sync="dialogFormVisible" width="600px">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="left"
      label-width="140px"
      style="margin: 0 30px"
    >
      <template>
        <el-form-item label="机柜编号" prop="number">
          <el-input v-model="temp.number" />
        </el-form-item>

        <el-form-item label="微信商户ID" prop="wx_mch_id">
          <el-select v-model="temp.wx_mch_id" filterable placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in wx_mch_options"
              :key="item.wx_mch_id"
              :label="item.wx_mch_id"
              :value="item.wx_mch_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="景点名称" prop="attraction_id">
          <el-select
            v-model="temp.attraction_id"
            filterable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in attraction_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机柜位置" prop="location">
          <el-input v-model="temp.location" />
        </el-form-item>
        <el-form-item label="是否开通弹出工具" prop="is_open_eject">
          <el-radio-group v-model="temp.is_open_eject">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否掉落耳机" prop="is_drop_headphone" class="drop-headphone">
          <el-radio-group v-model="temp.is_drop_headphone">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
          <el-tooltip class="qustion-tooltip" effect="dark" placement="top">
            <div slot="content">机柜在线时编辑有效<br />不在线编辑无效</div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 -200 1024 1024"
              class="icon-svg"
            >
              <path
                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372"
              />
              <path
                d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7c-21.2 8.1-39.2 22.3-52.1 40.9c-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5c.1-39.3-17.1-76-48.3-103.3M472 732a40 40 0 1 0 80 0a40 40 0 1 0-80 0"
              />
            </svg>
          </el-tooltip>
        </el-form-item>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="saveData">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDetail, add, edit } from '@/api/cabinets'
import { getList as getAttractionList } from '@/api/attraction'
import { getWxmchList } from '@/api/common'
const rule = [{ required: true, message: '必填项不能为空' }]
export default {
  name: 'CabinetsEdit',

  data() {
    return {
      dialogFormVisible: false,
      id: '',
      temp: {
        number: '',
        wx_mch_id: '',
        attraction_id: '',
        location: '',
        is_open_eject: '',
        is_drop_headphone: ''
      },
      rules: {
        number: rule,
        wx_mch_id: [{ required: true, message: '请选择微信商户ID', trigger: 'change' }],
        attraction_id: [{ required: true, message: '请选择景点名称', trigger: 'change' }],
        location: rule,
        is_open_eject: [{ required: true, message: '请选择是否开通弹出工具', trigger: 'change' }]
      },

      attraction_options: [],
      wx_mch_options: []
    }
  },

  created() {
    getWxmchList().then((res) => {
      this.wx_mch_options = res.data
    })
    getAttractionList({ is_page: 0 }).then((res) => {
      this.attraction_options = res.data.list_data
    })
  },
  methods: {
    handleCreate() {
      this.id = ''
      this.temp = {
        number: '',
        wx_mch_id: '',
        attraction_id: '',
        location: '',
        is_open_eject: '',
        is_drop_headphone: ''
      }
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    // 编辑
    handleEdit(id) {
      getDetail(id).then((res) => {
        this.id = id
        Object.assign(this.temp, res.data)
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      })
    },
    // 保存
    saveData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const d = JSON.parse(JSON.stringify(this.temp))
          const p = this.id ? edit(this.id, d) : add(d)
          p.then(() => {
            this.$parent.fetchData()
            this.dialogFormVisible = false
            this.$parent.$notify({
              title: '成功',
              message: this.id ? '修改成功' : '添加成功',
              type: 'success'
            })
          })
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.item-p {
  margin: 0;
  /* height: 1px; */
}
.qustion-tooltip {
  cursor: pointer;
  margin-left: 5px;
}
.icon-svg {
  height: 20px;
  position: relative;
  top: 2px;
  left: 5px;
  fill: #888;
  &:hover {
    fill: #1677ff;
  }
}
</style>
